<template>
  <div class="app-container">
    <el-row :gutter="20" >
      <el-col :span="5">
        <pointList v-on:handlePointClick="handlePointClick"></pointList>
      </el-col>
      <!--历史数据-->
      <el-col :span="19">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
          <el-form-item label="时间">
            <el-date-picker :editable="false" :clearable="false" style="width: 140px;"
                            v-model="queryParams.dataTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
            <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
            <!--<el-input
              v-model="dataTime"
              placeholder="请输入时间"
              clearable
              size="small"
              style="width: 180px;margin: 0 10px;"
            />
            <el-button size="mini" @click="genHour">生成</el-button>-->
          </el-form-item>
        </el-form>
        <div style="height: 300px;">

          <div style="float: left;margin-left: 5px;">
            <span v-if="pointParamList.length==0">该站点无数据参数</span>
            <el-checkbox-group v-model="checkList"  >
              <el-checkbox
                v-for="pointParam in pointParamList"
                :key="pointParam.id"
                :label="pointParam.paramId"
              >{{pointParam.paramInfo.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <div style="clear: both;">
            <line-chart v-if="pointParamList.length>0" :chart-data="chartDataObj" :clear="clear" :height="'280px'"/>
          </div>

        </div>
        <el-table v-loading="loading" :stripe="true" :data="hourMainList" :max-height="tabHt" v-show="pointParamList.length>0">
          <el-table-column width="180" :label="`时　间`" align="center" prop="dataTimes" />
          <el-table-column min-width="120"
                           v-for="pointParam in pointParamList"
                           :key="pointParam.id"
                           :label="pointParam.paramInfo.name+`\n`+pointParam.paramInfo.unit"
                           :prop="`param${(pointParam.paramId)}`"
                           align="center">
            <template v-slot="scope">
              <span v-html="scope.row[`param${(pointParam.paramId)}`]"></span>
            </template>
          </el-table-column>
        </el-table>

      </el-col>
    </el-row>

  </div>
</template>

<script>
  import { listPointParam } from "@/api/basic/pointParam";
  import { exportHourMain,genHourData,report,queryMoreParam } from "@/api/basic/hourMain";
  import pointList from "@/views/components/pointTreeList";
  import LineChart from "./LineChart";

  const chartDataObj = {
    xAxisData: [],
    yAxis:{},
    legendData: [],
    series:[],
  }

export default {
  name: "HourMain",
  components: {
    pointList,LineChart
  },
  data() {
    return {
      chartDataObj:chartDataObj,
      checkList:[],
      clear:true,
      dataTime:'2021-01-27 17:00:00',
      // 遮罩层
      loading: true,
      pointParamList: [],
      // 小时数据main表格数据
      hourMainList: [],
      // 查询参数
      queryParams: {
        dataTime: undefined,
        pointId: undefined
      },
      queryParamsParam: {
        pageNum: 1,
        pageSize: 20,
        pointId: undefined,
        paramType: 'num'
      },
    };
  },
  watch: {
    checkList(val){
      this.getMoreParam();
    }
  },
  computed: {
    tabHt(){
      return this.$store.state.app.tableHeight.ht - 290
    }
  },
  mounted() {
    let nowDate = new Date();
    let byear = nowDate.getFullYear();
    let bmonth = nowDate.getMonth() + 1;
    let bday = nowDate.getDate();
    this.queryParams.dataTime = `${byear}-${bmonth}-${bday}`;
  },
  created() {

  },
  methods: {
    handlePointClick(obj){
      this.queryParams.pointId=obj.pointId;
      this.queryParamsParam.pointId=obj.pointId;
      this.getPointParam();
    },
    /** 查询站点参数关联列表 */
    getPointParam() {
      let that = this;
      this.checkList = [];
      listPointParam(this.queryParamsParam).then(response => {
        this.pointParamList = response.rows;
        this.pointParamList.forEach(function (pointParam,i) {
          if(i<4){
            that.checkList.push(pointParam.paramId);
          }
        })
        // this.getMoreParam();
        this.getList();
      });
    },
    /** 查询小时数据main列表 */
    getList() {
      this.loading = true;
      report(this.queryParams).then(response => {
        this.hourMainList = response.data;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getMoreParam();
      this.getList();
    },
    //生成小时数据
    genHour() {
      console.log(this.dataTime)
      let obj = {
        pointId:16,
        dataTime:this.dataTime
      }
      genHourData(obj).then(response => {

      });

    },
    getMoreParam() {
      let _this=this
      if(this.checkList.length==0){
        this.chartDataObj.xAxisData = []
        this.chartDataObj.yAxis = []
        this.chartDataObj.series = []
        this.chartDataObj.legendData = []
        return;
      }
      this.queryParams.paramIds = this.checkList.join(',');
      queryMoreParam(this.addDateRange(this.queryParams, this.dateRange)).then(obj => {
        this.chartDataObj.xAxisData = []
        this.chartDataObj.yAxis = []
        this.chartDataObj.series = []
        this.chartDataObj.legendData = []
        let valsMap = obj.valsMap;
        let flag = true;
        for(var key in valsMap) {
          flag = false;
        }
        console.log(flag)
        if(flag){
          return;
        }
        console.log(1111)
        let legendDataArr = obj.legendData;
        let paramIds = obj.paramIds;
        if(obj.xAxisData){
          _this.chartDataObj.xAxisData = obj.xAxisData;
        }
        paramIds.forEach(function(paramId,i) {
          let valsData = valsMap[paramId];
          _this.chartDataObj.yAxis.push({
            show : false,
            name: legendDataArr[i],
            type: "value",
            // position: "right",
            //splitNumber: 10, // Y 轴分隔格数
            // offset:i*30,
            axisLabel:{       //y轴
              show:false
            },
            axisLine:{       //y轴
              show:false
            },
            axisTick:{       //y轴刻度线
              show:false
            },
            splitLine: {
              // Y 轴分隔线样式
              show: true,
              lineStyle: {
                //color: ["#f3f0f0"],
                width: 2,
                type: "solid"
              }
            },
            scale: true
          });
          _this.chartDataObj.series.push({
            name: legendDataArr[i],
            // smooth: true,
            type: 'line',
            yAxisIndex: i,
            itemStyle: {
              normal: {
                // color: '#3888fa',
                lineStyle: {
                  // color: '#3888fa',
                  width: 2
                },
                areaStyle: {
                  color: '#f3f8ff'
                }
              }
            },
            data: valsData
          });
        });
        _this.chartDataObj.legendData=legendDataArr;
        console.log(_this.chartDataObj)
      });

    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出数据?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportHourMain(queryParams);
        }).then(response => {
          this.download(response.msg);
        })
    }
  }
};
</script>
